<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        #but{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            height: 50px;
            width:50px;
        }
        body,html{
            height:100%;
            width:100%;
        }
    </style>
</head>
<body id="body">
<button id="but">点我试试</button>

<script>
    /*
    * 事件3要素：1、事件源 2、事件本身 3、事件的处理函数
    *
    * */
    var but=document.querySelector("#but");
    /*but.onclick=function(e){
        console.log(e);
    }
    but.ondrag=function(e){
        alert(111);
    }*/

    document.body.oncontextmenu=function(e){
        e.stopPropagation();//取消冒泡
        e.preventDefault();//取消浏览器的默认行为
        //debugger;
    }

</script>

</body>
</html>